<template>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-3">
                    <img class="img-fluid" :src="user.photo" />
                </div>
            <div class="col-3">
                <div class="username">{{user.username}}</div>
                <div class="fans">粉丝: {{user.followerCount}}</div>
                <button @click="flower" v-if="!user.is_followed" type="button" class="btn btn-primary btn-sm">+关注</button>
                <button @click="unflower" v-if="user.is_followed" type="button" class="btn btn-primary btn-sm">已关注</button>
            </div>
        </div>
        </div>
    </div>

</template>

<script>

    export default {
        name:"UserProfileInfo",
        props:{
            user:{
                type:Object,
                required:true,
            },
        },
        setup(props,context){
            const flower=() =>{
                context.emit('flower');
            };
            const unflower=() =>{
                context.emit('unflower');
            };
            return {flower,unflower};
        }
    };

</script>

<style scoped>
    img{
        border-radius: 50%;
    }
    .username{
        font-weight: bold;
    }
    .fans{
        font-size: 6px;
    }
    button{
        padding: 2px,2px;
        font-size: 12px;
    }
</style>

